import Vue from "vue";
import Router from "vue-router";
import elTbale from "@/components/element/elTable";
import store from "@/components/store/store";
import vue from "@/components/Vue/vue";
import ECMAScript from "@/components/ECMAScript/ECMAScript";
import git from "@/components/git/git";
import home from "@/components/view/homePage";

import routerParam from "@/components/routerProp/routerParam";
import receiveParam from "@/components/routerProp/receiveParam/receiveParam";

//路由重定向
import redirect from "@/components/routerProp/routeRedirect/redirect";
import a from "@/components/routerProp/routeRedirect/a";
import b from "@/components/routerProp/routeRedirect/b";

import brouteNavigation from "@/components/routeNavigation/routeNavigation";
import child from "@/components/routeNavigation/child";

// 路由Prop传值

import routeProp from "@/components/routerProp/props/routeProp";
import Hello from "@/components/routerProp/props/hello";
Vue.use(Router);

// Router.
const router = new Router({
  routes: [
    {
      path: "/",
      // redirect:"/",
      name: "home",
      components: {
        default: home
      }
    },
    {
      path: "/elTbale",
      name: "elTbale",
      component: elTbale
    },
    {
      path: "/store",
      component: store,
      name: "store"
    },
    {
      path: "/vue",
      component: vue,
      name: "vue"
    },
    {
      path: "/ECMAScript",
      component: ECMAScript,
      name: "ECMAScript"
    },
    {
      path: "/git",
      component: git
    },
    {
      path: "/routerParam",
      component: routerParam
    },
    {
      path: "/receiveParam",
      component: receiveParam,
      name: "receiveParam",
      meta: { title: "组件", content: "receiveParam" }
    },
    {
      path: "/redirect",
      component: redirect,
      children: [
        // {
        //   path: "/a",
        //   // redirect:'/b',
        //   component: a
        // },
        {
          path: "/a",
          component: a,
          alias: "/b" //别名
        }
        // {
        //   path: "/b",
        //   component: b
        // }
      ]
    },
    {
      path: "/brouteNavigation",
      component: brouteNavigation,
      children: [
        {
          path: "/child/:id",
          component: child,
          props: true
        }
        // {
        //   path: '/user/:id',
        //   components: { default: User, sidebar: Sidebar },
        //   props: { default: true, sidebar: false }
        // }
      ]
    },

    //路由传值
    {
      path: "/routeProp",
      component: routeProp,
      children: [
        { path: "/", component: Hello }, // No props, no nothing
        { path: "/hello/:name", component: Hello, props: true }, // Pass route.params to props
        { path: "/static", component: Hello, props: { name: "world" } }, // static values
        { path: "/dynamic/:years", component: Hello, props: dynamicPropsFn }, // custom logic for mapping between route and props
        { path: "/attrs", component: Hello, props: { name: "attrs" } }
      ]
    }
  ]
});
function dynamicPropsFn(route) {
  const now = new Date();
  return {
    name: now.getFullYear() + parseInt(route.params.years) + "!"
  };
}
// router.beforeEach((to, from, next) => {
//   console.log(to);
//   console.log(from);
//   console.log(next);
//   // to.
// })
export default router;
